<script setup name="spareinfo">
import { reactive } from 'vue-demi'

const { proxy } = getCurrentInstance()
// 备件信息 字典查询
const {
  picking_returns_status, // 检验项目单据状态
  picking_returns_type, //检验项目收发类型
  picking_rest_category, //检验项目新增类别
  sys_material_unit //物料单位
} = proxy.useDict('picking_returns_status', 'picking_returns_type', 'picking_returns_category', 'sys_material_unit')

// 保存单挑数据 用作回显
const ruleForm = ref()

const value = ref('')

const newRef = ref(null)

// tabs默认值
const tabName = ref('Warehousing')

// 标题
const title = ref('新增')

// 保存加载状态
const Btnloading = ref(false)

// 表格加载状态
const loading = ref(false)

// 备件信息 表格数据
const tableData = ref([
  {
    id: 1,
    a: '111',
    b: '222',
    c: '333',
    d: '444'
  },
  {
    id: 2,
    a: 'aa',
    b: 'bb',
    c: 'cc',
    d: 'dd'
  },
  {}
])

// 新增表单
const addForm = reactive({})

// 列表总数量
const total = ref(0)

// 是否禁用删除
const delDisabled = ref(false)

// 是否禁用 单选
const examineDisabled = ref(false)

// 勾选的id
const ids = ref([])

// 勾选的数据
const rows = ref([])

// 新增弹窗状态
const addIsShow = ref(false)

// 弹窗取消
const close = () => {
  addIsShow.value = false
}

// 新增弹窗
const addDia = () => {
  title.value = '新增'
  addForm.a = ''
  addForm.b = ''
  addForm.c = ''
  addForm.d = ''
  addIsShow.value = true
}

// 修改弹窗
const edit = val => {
  // console.log(val)
  title.value = '修改'
  addIsShow.value = true
}

// 查询条件
const SelectList = ref([
  { label: '备件编码', model: 'a', type: '输入框' },
  { label: '备件名称', model: 'a', type: '输入框' },
  { label: '备件类别', model: 'a', type: '输入框' }
])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 10
})

// 新增表单 校验规则
const addrules = reactive({
  a: [{ required: true, message: '请输入', trigger: 'blur' }]
})

// 勾选列表数据时
const handleSelectionChange = selection => {
  rows.value = selection
  ids.value = selection.map(item => item.id)

  delDisabled.value = !selection.length
  selection.length <= 0 || selection.length > 1 ? (examineDisabled.value = true) : (examineDisabled.value = false)
}
handleSelectionChange([])

// 回显数据赋值
watchEffect(() => {
  if (typeof addForm == 'object' && addForm?.id) {
    for (let Key in addForm) {
      ruleForm[Key] = addForm[Key]
    }
  }
})

// 新增保存
const addSub = () => {
  newRef.value.validate(valid => {
    if (!valid) {
      proxy.warningMsg('请填写完整')
      resolve(false)
    } else {
      tableData.value.push(addForm)
      // console.log(addForm)
      addForm.a = ''
      addForm.b = ''
      addForm.c = ''
      addForm.d = ''
      close()
    }
  })
}

// 修改保存
const editSub = val => {
  // console.log(val)
}
</script>
<template>
  <div class="app-container">
    <div class="app">
      <!-- 查询条件组件 -->
      <SelectForm :SelectForm="SelectList" @selectSubmit="selectSubmit" />
    </div>
    <!--备件信息 表格数据 -->
    <el-card class="box-card">
      <div class="btnmp">
        <el-button type="primary" v-hasPermi="['spareadmin:admin:spareinfo:add']" @click="addDia">添加</el-button>
        <el-button
          type="primary"
          v-hasPermi="['spareadmin:admin:spareinfo:remove']"
          :disabled="delDisabled"
          @click="smallRollDia"
          >删除</el-button
        >
      </div>
      <el-table v-loading="loading" stripe border :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed="left" />
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="备件名称" align="center" prop="a" width="120"> </el-table-column>
        <el-table-column label="备件编码" align="center" width="auto" prop="b" />
        <el-table-column label="备件类别" prop="c" width="120" align="center" />
        <el-table-column label="备件规格" prop="d" width="180" align="center" />
        <el-table-column label="最小起订量" prop="a" width="100" align="center" />
        <el-table-column label="是否归还" prop="a" width="100" align="center" />
        <el-table-column label="创建人" prop="a" width="100" align="center" />
        <el-table-column label="创建时间" prop="a" width="100" align="center" />
        <el-table-column label="操作" width="140" align="center" fixed="right">
          <template #default="scope">
            <div>
              <el-link
                v-hasPermi="['spareadmin:admin:spareinfo:edit']"
                type="primary"
                text="修改"
                @click="edit(scope.row)"
              />
              <el-link
                type="primary"
                v-hasPermi="['spareadmin:admin:spareinfo:remove']"
                text="删除"
                @click="del(scope.row.id)"
              />
              <el-link
                type="primary"
                v-hasPermi="['spareadmin:admin:spareinfo:query']"
                text="查看"
                @click="del(scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 新增弹窗 -->
    <p-XiaoheDialog :dialogVisible="addIsShow" :title="title" @close="close" width="50%">
      <template #body>
        <div class="app-container">
          <!-- 新增 表单 -->
          <el-form
            :model="addForm"
            label-width="120px"
            class="demo-ruleForm"
            :rules="addrules"
            status-icon
            inline
            ref="newRef"
            :ruleForm="ruleForm"
          >
            <el-form-item label="备件名称" prop="a">
              <el-input v-model="addForm.a" placeholder="请输入备件名称" />
            </el-form-item>
            <el-form-item label="备件类别">
              <el-select v-model="value" class="m-2" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="备件规格">
              <el-input v-model="addForm.b" placeholder="请输入备件名称" />
            </el-form-item>
            <el-form-item label="备件单位">
              <el-select v-model="value" class="m-2" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="最小起订量">
              <el-input v-model="addForm.c" placeholder="请输入备件名称" />
            </el-form-item>
            <el-form-item label="最小安全库存" prop="a">
              <el-input v-model="addForm.d" placeholder="请输入备件名称" />
            </el-form-item>
            <el-form-item label="是否归还">
              <el-select v-model="value" class="m-2" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="超收标志">
              <p-switch v-model="addForm.defaultFlag" />
            </el-form-item>
            <el-form-item label="超发标志">
              <p-switch v-model="addForm.defaultFlag" />
            </el-form-item>
          </el-form>
        </div>
        <Btn :loading="Btnloading" @close="close" @submit="title == '新增' ? addSub() : editSub()" />
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style lang="scss" scoped>
.btnmp {
  margin-bottom: 20px;
}
.app-container ::v-deep .el-input__inner {
  width: 168px !important;
}
</style>
